<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户书籍管理</title>
  <link rel="stylesheet" href="http://42.192.127.112/assets/css/global.css">
  <style>
    body {
      padding: 1rem 2rem;
      padding-bottom: 3rem;
    }

    .delete-btn {
      margin-left: 1rem;
    }

    .booklet-record {
      padding: 0.25rem 0;
    }
  </style>
</head>

<body>
  <h1>用户书籍管理</h1>
  <h4>书籍数量：{{bookletsCount}}</h4>
  
  <form action="">
    <div class="add-active-btn">Add</div>
    <input type="text" name="recordStart" placeholder="recordStart">
    <input type="text" name="recordEnd" placeholder="recordEnd">
    <button type="button" id="submitAdd">Add Booklet Record</button>
  </form>

  <form action="">
    <div class="add-active-btn">Delete</div>
    <input type="text" name="recordStart" placeholder="recordStart">
    <input type="text" name="recordEnd" placeholder="recordEnd">
    <button type="button" id="submitDelete">Add Booklet Record</button>
  </form>

  <h4>书籍预览</h4>
  <div class="container">
    {% for booklet in booklets %}
    <div class="booklet-record flex">
      <div class="booklet-id">{{ booklet.id }}.</div>
      <div class="booklet-name">{{ booklet.name }}</div>
      <button type="button" data-booklet-id="{{booklet.id}}" class="delete-btn"> Delete </button>
    </div>
    {% else %}
    <div class="no-record">没有书籍</div>
    {% endfor %}
  </div>

</body>
<script src="./public/js/my-plugin.js"></script>
<script>
  const SERVICE_API_URL_PREFIX = 'http://192.168.1.105:3001/'
  
  const addForm = document.forms[0]
  const addRecordStartEle = addForm['recordStart']
  const addRecordEndEle = addForm['recordEnd']
  const deleteForm = document.forms[1]
  const deleteRecordStartEle = deleteForm['recordStart']
  const deleteRecordEndEle = deleteForm['recordEnd']
  const query = $DeSerialize(location.href.split('?')[1])
  const {
    user_id
  } = query

  const container = document.getElementsByClassName('container')[0]
  container.addEventListener('click', (e)=>{
    const target = e.target
    const className = target.className
    if (className === 'delete-btn') {
      const {
        bookletId
      } = target.dataset
      deleteRecord(user_id, {recordStart: bookletId, recordEnd: bookletId})
    }
  })

  const submitDelete = document.getElementById('submitDelete')
  submitDelete.addEventListener('click', ()=>{
    deleteRecord(user_id, {
      recordStart: deleteRecordStartEle.value,
      recordEnd: deleteRecordEndEle.value,
    })
  })

  const submitAdd = document.getElementById('submitAdd')
  submitAdd.addEventListener('click', function () {
    $Ajax({
      url: SERVICE_API_URL_PREFIX + 'back_api/v1.0/user_booklets',
      method: 'POST',
      data: {
        recordStart: addRecordStartEle.value,
        recordEnd: addRecordEndEle.value,
        user_id
      },
      dataType: 'application/json; charset=utf-8',
      success(res) {
        try {
          res = JSON.parse(res)
          if (res.status === 'success') {
            reloadPage()
          } else {
            alert(res.message)
          }
        } catch (e) {
          console.log(e.message)
        }
      }
    })
  })

  //删除记录
  function deleteRecord(user_id, {recordStart, recordEnd}) {
    $Ajax({
      url: SERVICE_API_URL_PREFIX + 'back_api/v1.0/user_booklets/' + user_id,
      method: 'DELETE',
      data: {
        recordStart,
        recordEnd
      },
      dataType: 'application/json; charset=utf-8',
      success(res) {
        try {
          res = JSON.parse(res)
          if (res.status === 'success') {
            reloadPage()
          } else {
            alert(res.message)
          }
        } catch (e) {
          console.log(e.message)
        }
      }
    })
  }

  //刷新页面
  function reloadPage() {
    location.reload(true)
  }
</script>

</html>